/**
 * @ element plus 组件重置
 * @ author: LeiHao
 * @ createTime: 2024/3/27
 */

// 自定义table
.el-table.custom-table {
    background-color: transparent;
    thead {
        color: #EDF0F4;
    }
    thead th.el-table-fixed-column--left,
    thead th.el-table-fixed-column--right {
        background-color: #EDF0F4;
        color: #242832;
    }
    th.el-table__cell {
        background-color: #EDF0F4;
        color: #242832;
    }
    tr {
        background-color: transparent;
        &:hover {
            background-color: #D9E9F9;
        }
    }
    td.el-table__cell {
        background-color: transparent!important;
    }

    td.el-table-fixed-column--left,
    td.el-table-fixed-column--right {
        background-color: #FAFBFD!important;
    }
}


// 自定义card
.custom-card {
    margin-bottom: 10px;
    .el-card__header {
        display: flex;
        align-items: center;
        padding-bottom: 14px!important;
        .title {
            padding-left: 6px;
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            .alert {
              padding: 4px 10px;
              background: rgba(254, 108, 108, 0.2);
              font-size: 12px;
              margin-left: 10px;
              border-radius: 3px;
              color: rgba(254, 108, 108, 1);
            }
        }
    }
    .el-card__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    &.no-border {
        border: none;
    }
}
  
// 自定义card - 作为外层容器
.custom-card__outer {
    margin-bottom: 20px;
    .el-card__header {
        .el-form-item {
            margin-bottom: 0;
        }
        &-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .el-card__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    .el-table__header thead th {
        background-color: #f5f5f5;
    }
}

// 自定义card - 作为内部分割
.custom-card__inner {
    border: none;
    .el-card__header {
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .el-card__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
}

// 自定义dialog
.el-overlay-dialog {
    inset: 15px;
}
.custom-dialog {
    .el-dialog__header {
        border-bottom: 1px solid #e8eaec;
        padding: 15px;
        margin: 0;
    }
    .el-dialog__footer {
        text-align: center;
    }
}

/* 自定义 drawer 样式 */
.custom-drawer {
    .el-drawer__header {
        border-bottom: 1px solid #e8eaec;
        margin-bottom: 0;
        padding: 14px 16px;
        span:focus {
            outline: none;
        }
    }
    .el-drawer__body {
        position: static;
        height: calc(100% - 55px);
        overflow: auto;
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 53px;
    }

    /** element ui drawer组件本身没有footer，这里自定义一个footer */
    .el-drawer__footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: center;
        background: #fff;
        z-index: 4;
    }
}

// 自定义alert
.custom-alert {
    padding: 6px 10px!important;
    margin-top: 6px!important;
    .el-alert__description {
        line-height: 150%;
    }
}

// 重置button中的link垂直对齐方式
.el-button {
    .el-link {
        vertical-align: top;
        font-size: 12px;
    }
}

// 自定义descriptions
.custom-descriptions {
    .el-descriptions__header {
        margin-bottom: 10px;
        justify-content: flex-start;
    }
    .el-descriptions__title {
        font-weight: normal;
        margin-right: 20px;
    }
    .el-descriptions__label {
        font-weight: 400!important;
    }
}

// 自定义带编辑按钮的头
.custom-header__editable {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .title {
        font-size: 16px;
        line-height: 40px;
        color: #333;
        margin-right: 15px;
    }
}

// 重置回到顶部曾经
.el-backtop {
    z-index: 999;
}

.el-form-item {
    &.is-tip {
        margin-top: -18px;        
        .el-form-item__content {
            font-size: 12px;
            color: rgb(127, 127, 127);
        }
    }
}
